<template>
    <div class="discount">
        <Nav @get_discount="get_product"></Nav>
        <Nav2></Nav2>
        <div class="top-h1">
            <img src="../assets/img/discount.jpg" alt="" class="cover">
            <!--<h1>大促销</h1>-->
        </div>
        <div class="container">
            <div class="row">
                 <img src="../assets/img/zu.jpg" alt="" class="cuxiao">
                <div class="product" v-for="product in product_list" :key="product.name">
                    <img :src="product.cover" alt="" class="image" >
                    <h4 class=desc>{{ product.title}}</h4>
                    <h5 class=desc style="color: #79747d">{{ product.desc}}</h5>
                    <p class="money old">¥{{product.price*1.5}} /人</p>
                    <p class="money new">¥{{product.price*1}} /人</p>
                    <hr>
                </div>
            </div>
        </div>
        <Chat></Chat>
        <Foot></Foot>

    </div>

</template>

<script>
    import Nav from '../components/Nav'
    import Nav2 from '../components/Nav2'
    import Chat from '../components/Chat'
    import Foot from '../components/Foot'

    export default {
        name: "Discount",
        data() {
            return {
                product_list: '',

            }
        },
        components: {
            Nav, Nav2, Chat, Foot
        },
        methods: {
            get_product() {
                this.$axios({
                    url: this.$settings.base_url + '/product/product?discount=true'
                }).then(response => {
                    this.product_list = response.data;
                });
            }
        },
        created() {
            this.get_product()
        }
    }
</script>

<style scoped>

    .top-h1 {
        position: relative;
        z-index: 1;

    }

    .cover {
        height: 360px;
        width: 100%;

        z-index: 1;
    }

    .category {
        display: block;

    }

    h1 {
        display: inline-block;
        text-align: center;
        position: absolute;
        z-index: 2;
        top: 40%;
        left: 48%;
        color: white;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);

    }

    .product {
        width: 335px;
        height: 315px;
        background: white;
        display: inline-block;
        margin-left: 50px;
        margin-top: 60px;
    }

    .desc {
        display: block;
        text-align: center;
        cursor: pointer;
    }

    .image {
        width: 335px;
        height: 220px;
        display: block;
        border-radius: 8px;
        cursor: pointer;
        position: relative;

    }

    .money {
        color: #ff2b8a;
        display: inline-block;
        text-align: center;
        margin-bottom: 10px;
        cursor: pointer;
    }
    .old{
        text-decoration : line-through;
    }
    .new{
        margin-left: 60px;
    }

    .cuxiao{
        width: 80px;
        position: absolute;
        left: 100px;
        display: block;
        z-index: 2;
        margin-top: 25px;
    }
</style>22